<template>
    <div>
        <div class="question-header">
            <span>
                {{currentIndex}}/{{this.questionData.length}}
            </span>
            <p>{{questionOpt.id}}.{{questionOpt.label}}</p>
        </div>
        <div class="question-content">
            <button @click="handleClick(0, questionOpt.index)" :class="{active: this.currentAnswer === 0}">A、是</button>
            <button @click="handleClick(1, questionOpt.index)" :class="{active: this.currentAnswer === 1}">B、否</button>
        </div>
        <div class="question-footer">
            <p @click="handlePrev" v-if="this.index !== 0">
                <!-- <p @click="handlePrev"> -->
                <span></span>
                上一题
            </p>
        </div>
    </div>
</template>
<script>
import http from '../service/http'
export default {
    data() {
        return {
            questionData: [],
            questionOpt: {
                id: '',
                label: '',
                index: 0
            },
            // answer: [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0],
            answer: [],
            index: 0,
            currentAnswer: null
        }
    },
    created() {
        http.questionsServer({}, ([res, data]) => {
            this.questionData = data.data
            this.questionOpt = { ...this.questionOpt, ...this.questionData[0] }
        })
    },
    computed: {
        currentIndex() {
            if (this.index < this.questionData.length) {
                return this.index + 1
            } else {
                return this.questionData.length
            }
        }
    },
    methods: {
        handleClick(val, idx) {
            if (this.index === this.questionData.length) {

                console.log('最后一道题')
                return
            }
            let arry = this.answer
            // let param = {
            //     choice: val,
            //     question: this.questionOpt.id
            // }
            this.currentAnswer = val
            if (this.answer[this.index] === void (0)) {
                this.index += 1
                this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
                this.questionOpt.index = this.index
                arry.push(val)
                this.answer = arry
                this.currentAnswer = null
            } else {
                arry.splice(this.index, 1, val)
                this.index += 1
                this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
                this.questionOpt.index = this.index

                this.answer = arry
                this.currentAnswer = null
            }
        },
        handlePrev() {
            if (this.index === 0) return
            this.index -= 1
            this.questionOpt = { ...this.questionOpt, ...this.questionData[this.index] }
            this.questionOpt.index = this.index

            this.currentAnswer = this.answer[this.index]
            // http.submitQuestionsServer({ answer: this.answer }, ([res, data]) => {
            //     this.$router.push({ path: '/result', query: { key: data.data } })
            // })
        }
    },
    watch: {
        index(newValue) {
            // console.log('当前索引', newValue)
            // console.log('总的题目', this.questionData.length)
            // console.log(newValue === this.questionData.length)

            if (newValue === this.questionData.length) {
                console.log('题目已做完')
                http.submitQuestionsServer({ answer: this.answer }, ([res, data]) => {
                    // this.$router.push({ path: '/result', query: { key: data.data } })
                    window.location.replace('/result.html?key=' + data.data)
                })
            }
            // console.log('---'.repeat(30))
        }
    }
}
</script>
<style lang="less" scoped>
.question-header {
  background-color: #d8e7fe;
  width: 100%;
  height: 3rem;
  font-size: 0;
  //   display: flex;
  //   align-items: center;
  padding: 0.32rem;
  p {
    font-size: 0.32rem;
    margin-top: 1rem;
  }
  span {
    font-size: 0.3rem;
    float: right;
  }
}
.question-content {
  margin-top: 0.32rem;
  display: flex;
  flex-direction: column;
  padding: 0.16rem;
  button {
    border: 1px solid #d8e7fe;
    list-style: none;
    margin: 0.16rem;
    height: 1rem;
    border-radius: 0.1rem;
    background-color: #ffffff;
    text-align: left;
  }
  button:focus {
    outline: none;
  }
  button:active {
    background-color: #d8e7fe;
    color: #fff;
  }
  .active {
    background-color: #d8e7fe;
    color: #fff;
  }
}
.question-footer {
  span {
    display: inline-block;
    width: 0.64rem;
    height: 0.32rem;
    background-image: url(../assets/jiantou.png);
    background-size: 100% 120%;
    background-repeat: no-repeat;
    background-position-x: 0.32rem;
  }
  p {
    font-size: 0.32rem;
  }
}
</style>
